export default {
  name: 'GradeChart',
  props: {
    chartTitle: {
      type: String
    },
    parentData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    parentData: {
      deep: true,
      handler(newValue, oldValue) {
        this.getTypeData(0)
      }
    }
  },
  data() {
    return {
      citySelect: false,
      sourceList: [],
      sourceConfig: {
        images: [
          require('static/img/grade_one.png'),
          require('static/img/grade_two.png'),
          require('static/img/grade_three.png'),
          require('static/img/grade_more.png')
        ],
        colors: ['#F03150', '#F9A600', '#00B779']
      }
    }
  },
  methods: {
    getTypeData(type) {
      let touristList = this.parentData
      switch (type) {
        case 0:
          this.barInit(touristList.country)
          break
        case 1:
          this.barInit(touristList.province)
          break
      }
    },
    barInit(newValue) {
      this.sourceList = []
      const maxData = []
      let maxDatanew = 0
      newValue.forEach(element => {
        maxData.push(Number(element.num))
      })
      // 获取最大的一个值
      maxDatanew = maxData.reduce((num1, num2) => {
        return num1 > num2 ? num1 : num2
      })
      newValue.forEach(element => {
        this.sourceList.push({
          name: element.portraitKey,
          percent: ((Number(element.num) / maxDatanew) * 100).toFixed(0) + '%',
          flow: element.num,
          max: '' + maxDatanew
        })
      })
    },
    cityButtonClick() {
      this.citySelect = !this.citySelect
      if (this.citySelect === true) {
        this.getTypeData(1)
      } else {
        this.getTypeData(0)
      }
    },
    clickMsg(name) {
      uni.showToast({
        title: name,
        icon: 'none'
      })
    },
  }
}
